<template>
  <div class="home">
   <my-input v-model="search" @blur="searchBtn"></my-input>
   <my-history v-show="list.length==0" @itemClick="historyBtn"></my-history>
   <ul>
     <li v-for="(item,index) in list" :key="index">{{item.goods_name}}</li>
   </ul>
  </div>
</template>

<script>
import MyInput from '../components/myInput.vue'
// @ is an alias to /src
import { ref,reactive,toRefs } from 'vue';
import axios from 'axios';
import { useStore } from 'vuex';
import MyHistory from '../components/myHistory.vue';
export default {
  name: 'Home',
  components: {
    MyInput,
    MyHistory
  },
  setup(props) {
    const store = useStore();
    const search = ref('');
    const data = reactive({
      list:[], // 请求的结果
    })
    const searchBtn = () => {
      axios.get(`https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query=${search.value}`).then(res => {
        data.list = res.data.message || [];
        if(search.value){
          store.commit('addhis', search.value);
        }
      })
    }

    const historyBtn = (val) => {
        search.value = val;
        searchBtn(); // 搜索的事件
    }
    return{
      search,
      searchBtn,
      ...toRefs(data),
      historyBtn
    }
  }
}
</script>
<style lang="scss" scoped>
  ul{
    height: calc(100vh - 50px);
    overflow: auto;
  }
</style>
